Use Bootstrap5.x in Django3.x

Due to rapid development of versions, some past instructions are impossible to use. This is the instrcution for newest versions.

Introduction to Bootstrap and Django

Bootstrap is a font framework. It is based on HTML, CSS and Javascript, including reusable modules, jQuery plugin, and grid system. Thus, it is friendly to beginner.

Django is a powerful WEB app framework. It has long history and completed document. The new project is with a auto-generate SQL database.

Steps to insert Bootstrap in Django

Download Django and Bootstrap.

This is the offical download instruction of Django: https://www.djangoproject.com/download/
This is the offical download instruction of Bootstrap:
https://getbootstrap.com/

To check whether they are downloaded and ready to use:
Open Terminal and enter:

1
python -m django --version

If you see ‘x.x.x’, Django has been set correctly.

If you can see a folder called ‘boostrap-x.x.x-dist’, Bootstrap has been set correctly.

Set up a new Django project

Open terminal, enter:

1
python -m django startproject * you project name *

attention: make sure you are in the folder where you want to put your new project in. Otherwise you highlypossible can’t find your project after you build it.

Then you will see a new folder appear.

Explaination about the structure of Django project folder

The folder structure

Often edit:

  • myWeb: the project folder
  • urls.py: set up the path of html files, like website catalogue

Seldom edit

  • asgi.py: An asgi compatible web server portal
  • wsgi.py: An wsgi compatible web server portal
  • setting.py: Django project settings
  • manage.py: support for Django Terminal

This is just the basic files, we may add the following files as we need:

  • views.py: to write view functions
  • model.py: to write model functions operating SQL
  • templates: to store HTML files
  • static: to store static files, such as: images, css, js
    The structure of folder after editing

Explaining about bootstrap files

Bootstrap files

The css and js stores all inital bootstrap css files and js files. Ensure to import them to every html you write.

Essential modify of files

  • In view.py and urls.py:
    add the following codes to views.py:
    1
    2
    3
    4
    from django.shortcuts import render
    from django.http import HttpRequest,HttpResponse
    def home(request):
        return render(request,'home.html')
    add the following code to urls.py:
    1
    2
    3
    4
    5
    6
    7
    from django.urls import path
    from . import views
    from django.contrib import admin
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('home/', views.home),
    ]
    Attention: in the newest version of Django, the original ‘url’ are changed to ‘path’
  • In the home.html in templates folder
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    {% load static %}
    <head>

    // your html head code

    <link rel = "stylesheet" href = "{% static 'bootstrap/css/bootstrap.min.css'%}">
    <link rel="stylesheet" href="{% static 'css/style.css'%}" />
    <link rel = "stylesheet" href="{% static 'css/home.css'%}"/>
    </head>
    <body>

    // your html body code

    <script src = "{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    </body>
  • In static folder
  1. create new folder called ‘bootstrap’
  2. In the bootstrap folder, create new folders: css, js
    The newest structured folders
  3. Copy the css and js files in the downloaded bootstrap folders to static correspondence folder.
  • In the settings.py
    Modify following codes, if they are not exist, add them:
    1
    2
    3
    4
    5
    STATIC_URL = 'static/'
    STATIC_ROOT = os.path.join(BASE_DIR, "root")
    STATICFILES_DIRS = [ 
        os.path.join(BASE_DIR, "statics"), 
    ]
    You can check whether the path is correct by enter following codes in Terminal:
1
python manage.py collectstatic

Then all the static files in the path will appear in root.

Run the test server

1
python manage.py runserver

You can see the page!